<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="['#00c2ff', '#000000']" />
            <div class="title">
              <span class="title-text">人工保洁大数据可视化平台</span>
              <dv-decoration-6 class="dv-dec-6" :reverse="true" />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="['#00c2ff', '#000000']"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <!-- <span class="text">数据分析1</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />

              <!-- <dv-decoration-10  class="dv-dec-10-s"/> -->
            </div>
            <div class="react-left ml-3">
              <!-- <span class="text">数据分析2</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right mr-3">
              <!-- <span class="text fw-b">vue-big-screen</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />
            </div>
            <div class="react-time mr-4 react-l-s">
              <span class="react-after"></span>
              <!-- <span class="text"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              > -->
              <h4 class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</h4>
            </div>
          </div>
        </div>
        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box3">
            <div class="one">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">所有人员实时在线统计 </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_ONE"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
            <!-- <div class="two">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">班组长巡逻村情况统计 </span>
            </div>
          </div>

          <div id="WorkOnStandard_TWO" style="width: 98%; height: 144px"></div>
        </dv-border-box-7>
      </div> -->
            <!-- <div class="three">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">各机扫队道路作业完成百分比 </span>
            </div>
          </div>

          <div
            id="WorkOnStandard_THREE"
            style="width: 98%; height: 144px"
          ></div>
        </dv-border-box-7>
      </div> -->
            <div class="four">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各班组人员实时在线统计情况百分比</span
                    >
                  </div>
                </div>
                <div
                  id="WorkOnStandard_FOUR"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="five">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">道路作业完成统计</span>
                  </div>
                </div>
                <!-- <div
                  id="WorkRatioByCartype"
                  style="width: 98%; height: 144px"
                ></div> -->
                <div
                  id="WorkOnStandard_FIVE"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
            <!-- <div class="six">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">各班组长巡逻村情况百分比</span>
            </div>
          </div>
          <div id="WorkOnStandard_XS" style="width: 98%; height: 144px"></div>
        </dv-border-box-7>
      </div> -->
            <div class="seven">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各班组人员人均报警统计情况百分比</span
                    >
                  </div>
                </div>

                <div
                  id="WorkOnStandard_SS"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="eight">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各班组道路作业完成百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_EIGHT"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="nine">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">考勤打卡正点情况统计 </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_NINE"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="ten">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各班组考勤打卡正点情况百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_TEN"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="eleven">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">人员作业统计</span>
                  </div>

                  <el-form ref="form" :model="form" class="list">
                    <el-form-item label="">
                      <el-select
                        v-model="form.clientNo2"
                        placeholder="请选择"
                        @change="initWorkOnStandard_JS"
                      >
                        <el-option
                          v-for="item in workList"
                          :key="item.categories"
                          :label="item.data"
                          :value="item.categories"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>

                <div
                  id="WorkOnStandard_JS"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="twelve">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">人员作业趟次 </span>
                  </div>

                  <el-form ref="form" :model="form" class="list">
                    <el-form-item label="">
                      <el-select
                        v-model="form.clientNo"
                        placeholder="请选择"
                        @change="initWorkOnStandard_CX"
                      >
                        <el-option
                          v-for="item in workList"
                          :key="item.categories"
                          :label="item.data"
                          :value="item.categories"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>

                <div
                  id="WorkOnStandard_CX"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="thirteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">考勤打卡正常情况统计 </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_THIRTEEN"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="fourteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各班组考勤打卡正常情况百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_TOURTEEN"
                  style="width: 98%; height: 144px"
                ></div>
              </dv-border-box-7>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { optionWorkOnStandard } from '@/components/echart/bar.js'
import { collectionRate } from '@/components/echart/bar.js'
// import { incomingQuantity } from '@/components/echart/bar.js'
import { spotsNumbe } from '@/components/echart/bar.js'
import { brokenLine } from '@/components/echart/bar.js'
import { optionBarContainBarAndRatio } from '@/components/echart/bar.js'
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import { formatDate } from '@/common/js/date.js'
import * as echarts from 'echarts';
export default {
  mixins: [drawMixin],
  data () {
    return {
      ClientNo: '00000',
      nowDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      radio1: '上海',
      workList: [],
      form: {
        userName: 'dlhw',
        date: '2020-10',
        clientNo: '00000',
        clientNo2: '00000',
        vehicleData: [{
          排队数: '0',
          车辆总数: '0',
          出动数: '0',
          出动率: '0',
        }],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayForType_Rubbish: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: [],
      },
      isZoomChange: 'S',
      map: null,
      mapZoom: 16,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted () {
    this.ClientNo = window.location.href.split('ClientNo=')[1];
    this.form.clientNo = window.location.href.split('ClientNo=')[1];
    this.form.clientNo2 = window.location.href.split('ClientNo=')[1];
    this.getInfoList()
    this.initWorkOnStandard_SS()
    this.initWorkOnStandard_CX()
    this.initWorkOnStandard_XS()
    this.initWorkOnStandard_JS()
    this.initWorkOnStandard_ONE()
    this.initWorkOnStandard_TWO()
    this.initWorkOnStandard_THREE()
    this.initWorkOnStandard_FOUR()
    this.initWorkOnStandard_EIGHT()
    this.initWorkOnStandard_FIVE()
    this.initWorkOnStandard_SIX()
    this.initWorkOnStandard_NINE()
    this.initWorkOnStandard_TEN()
    this.initWorkOnStandard_THIRTEEN()
    this.initWorkOnStandard_TOURTEEN()

    this.initWorkRatioByCartype()
    this.timeFn()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {

    // 获取清扫队列表
    async getInfoList () {
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetRow01N?sqlName=bde&url=exec ZXECharts_GetTeamsForPerson '" + this.ClientNo + "'";
      let { data } = await this.$Http.get(url);
      this.workList = data
      // this.workList = [{ categories: '0000009', data: '博德尔清扫队' }, { categories: '000000902', data: '华明清扫队' }, { categories: '00000090201', data: '高新区班组' },
      // { categories: '00000090202', data: '华明园内二班组' }, { categories: '00000090203', data: '华明园内三班组' }, { categories: '00000090204', data: '华明园内一班组' },
      // { categories: '00000090205', data: '津汉公路班组' }, { categories: '00000090206', data: '李明庄班组' }, { categories: '00000090207', data: '明珠花园班组' },
      // { categories: '00000090208', data: '卫国道班组' }, { categories: '00000090209', data: '橡树湾班组' }, { categories: '00000090210', data: '幺六桥班组' },
      // { categories: '000000906', data: '万新清扫队' }, { categories: '00000090601', data: '成林道班组' }, { categories: '00000090602', data: '津滨大道班组' },]
    },
    // 昨日各类型餐饮单位收运数量及覆盖率格式
    async initWorkRatioByCartype () {
      // [{"GROUPNAME":null,"CAR_TYPE":"洗路车","ALLNUM":"93","CURRENTNUM":"57"},
      // {"GROUPNAME":null,"CAR_TYPE":"机扫车","ALLNUM":"27","CURRENTNUM":"17"},
      // {"GROUPNAME":null,"CAR_TYPE":"高压清洗车","ALLNUM":"41","CURRENTNUM":"12"},
      // {"GROUPNAME":null,"CAR_TYPE":"洒水车","ALLNUM":"55","CURRENTNUM":"16"},
      // {"GROUPNAME":null,"CAR_TYPE":"小型机扫车","ALLNUM":"25","CURRENTNUM":"5"},
      // {"GROUPNAME":null,"CAR_TYPE":"除雪车","ALLNUM":"6","CURRENTNUM":"2"},
      // {"GROUPNAME":null,"CAR_TYPE":"总计","ALLNUM":"247","CURRENTNUM":"104"}]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkRatioByCartype'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionBarContainBarAndRatio(["覆盖率", "覆盖数", "总数"], {
        category: ["小区", "饭店", "企业"],
        // lineData: [300, 400, 600], barData: [276, 348, 336],
        // rateData: [92, 87, 56,]
      }));
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkByTypeInfo?CLIENT_NO="+ this.ClientNo;
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data.rateData
        }, {
          data: data.barData
        }, {
          data: data.lineData
        }]

      });
    },
    // 实时车辆在线统计
    async initWorkOnStandard_ONE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_ONE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetWorkerOnlineInfo  '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          // data: data.series
          data: data
        },]
      });
    },
    // 班组长巡逻村情况统计
    async initWorkOnStandard_TWO () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_TWO'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetWorkerCheckInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          // data: data.series
          data: data
        },]
      });
    },
    // 各机扫队道路作业完成百分比
    async initWorkOnStandard_THREE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_THREE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(brokenLine());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleRoadInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        // legend: {
        //   data: ['津C26292', '津C26292', '津C26292', '津C26292', '津C26292', '津C26292', '津C26292']
        // },
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    // 各班组人员实时在线统计情况百分比
    async initWorkOnStandard_FOUR () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_FOUR'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    //各班组道路作业完成百分比
    async initWorkOnStandard_EIGHT () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_EIGHT'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerRoadInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    //各班组考勤打卡正点情况百分比
    async initWorkOnStandard_TEN () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_TEN'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightAllInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    //各班组考勤打卡正常情况百分比  
    async initWorkOnStandard_TOURTEEN () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_TOURTEEN'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    // 道路作业完成统计
    async initWorkOnStandard_FIVE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_FIVE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetWorkerRoadInfo  '" + this.nowDate + "','" + this.ClientNo + "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 昨日泔水废油脂进厂量占比及数量
    async initWorkOnStandard_SIX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SIX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',机扫";
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetTypeWeightInfo?CLIENT_NO="+ this.ClientNo
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data.series

        },]
      });
    },
    // 考勤打卡正点情况统计
    async initWorkOnStandard_NINE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_NINE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightAllInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 考勤打卡正常情况统计
    async initWorkOnStandard_THIRTEEN () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_THIRTEEN'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 各班组人员人均报警统计情况百分比
    async initWorkOnStandard_SS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    // 人员作业趟次
    async initWorkOnStandard_CX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_CX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerRoadCountInfoDetail  '" + this.nowDate + "','" + this.form.clientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    //各班组长巡逻村情况百分比
    async initWorkOnStandard_XS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_XS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerCheckInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    // 人员作业统计
    async initWorkOnStandard_JS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_JS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerRoadInfoDetail  '" + this.nowDate + "','" + this.form.clientNo2 + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },

    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
        this.initC();
      }, 2000)
    },
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
//下方区域的布局
.content-box3 {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: repeat(6, 16.6%);
  grid-template-rows: repeat(5, 20%);
  grid-template-areas:
    'one four four eight eight five'
    'nine ten ten fourteen fourteen thirteen'
    // 'two six six seven seven seven'
    'seven seven seven seven seven seven'
    'twelve twelve twelve twelve twelve twelve'
    'eleven eleven eleven eleven eleven eleven';
}
.one {
  margin: 5px;
  grid-area: one;
  background: rgba(8,48,74,0.5);
}

// .two {
//   margin: 5px;
//   grid-area: two;
//   background: rgba(8,48,74,0.5);
//   // grid-row-start: span 2;
// }
.three {
  margin: 5px;
  grid-area: three;
  background: rgba(8,48,74,0.5);
}
.four {
  margin: 5px;
  grid-area: four;
  background: rgba(8,48,74,0.5);
}
.five {
  margin: 5px;
  grid-area: five;
  background: rgba(8,48,74,0.5);
}
// .six {
//   margin: 5px;
//   grid-area: six;
//   background: rgba(8,48,74,0.5);
// }
.seven {
  margin: 5px;
  grid-area: seven;
  background: rgba(8,48,74,0.5);
}
.eight {
  margin: 5px;
  grid-area: eight;
  background: rgba(8,48,74,0.5);
}
.nine {
  margin: 5px;
  grid-area: nine;
  background: rgba(8,48,74,0.5);
}
.ten {
  margin: 5px;
  grid-area: ten;
  background: rgba(8,48,74,0.5);
}
.eleven {
  margin: 5px;
  grid-area: eleven;
  background: rgba(8,48,74,0.5);
}
.twelve {
  margin: 5px;
  grid-area: twelve;
  background: rgba(8,48,74,0.5);
}
.thirteen {
  margin: 5px;
  grid-area: thirteen;
  background: rgba(8,48,74,0.5);
}
.fourteen {
  margin: 5px;
  grid-area: fourteen;
  background: rgba(8,48,74,0.5);
}
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
    color: #fff;
  }
}
.title-text {
  font-family: 'SimHei';
  font-weight: bold;
}
.list {
  position: absolute;
  right: -202%;
  // top: 25px;
}
</style>
